<template>
  <div class="image-view" @click="onClick" >
    <img
      :src="src"
      lazy-load
      @error="onError"
      @load="onLoad"
      v-show="!isLoading && !error"
      scaleToFill
      :class="round?'round image':'image'"
    />
    <img
      :src="'https://www.youbaobao.xyz/book/img/loading2.ae9e5924.jpeg' || ''"
      v-show="isLoading || error"
      scaleToFill
      :class="round?'round image':'image'" />
  </div>
</template>

<script>
  export default {
    name: "ImageView",
    props : {
      src : {
        type : String,
        default : '',
      },
      round :{
        type: Boolean,
        default : false,
      },
      mode : {
        type : String,
        default : 'widthFix',
      },
    },
    watch : {
      src(newVal,oldVal){
        if (newVal && newVal.length > 0 && newVal !== oldVal){
          this.isLoading = true;
          this.error = false;
        }
      }
    },
    data(){
      return {
        isLoading : true,//加载的图片
        error : false,//是否加载失败
      }
    },
    methods : {
      onClick(){  //图片点击事件

      },
      onError(){  //图片加载失败事件
        this.isLoading = false;
        this.error = true;
      },
      onLoad(){   //图片加载成功事件
        this.isLoading = false;
        this.error = false;
      },
    },
  }
</script>

<style lang="less" scoped>
.image-view{
  width: 100%;
  height: 100%;
  img{
    width: 100%;
    height: 100%;
  }
  .round{
    border-radius: 50%;
  }
}
</style>
